<template>
  <span
    :class="{
      right: this.index === this.i && msg === '正确',
      error: (this.index === this.i) & (msg === '错误'),
      undo: msg === '未完成',
    }"
    >{{ index }}: {{ this.index === this.i ? msg : msg }}</span
  >
</template>

<script>
export default {
  created() {
    this.$bus.$on("count", (bool, i) => {
      if (this.index === i) {
        this.i = i;
        if (bool) {
          this.msg = "正确";
        } else {
          this.msg = "错误";
        }
      }
    });
  },
  props: ["index"],
  data() {
    return {
      msg: "未完成",
      i: null,
    };
  },
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>